<script setup>

import { customRef, ref } from 'vue';

const name = ref('name')
const loading = customRef((track, trigger) => {
    let loadingCount = 0;
    return {
        get() {
            console.log('获取值捏')
            track();
            return loadingCount > 0;
        },
        set(value) {
            loadingCount = value ? loadingCount + 1 : loadingCount - 1;
            loadingCount = Math.max(0, loadingCount);
            trigger();
        }
    }
})

const addFetch = () => {
    loading.value = true;
    addFetch2();
    setTimeout(() => {
        name.value = 'addFetch'
        loading.value = false;
    }, 1000);
}


const addFetch2 = () => {
    loading.value = true;
    setTimeout(() => {
        name.value = 'addFetch2'
        loading.value = false;
    }, 2000);
}


</script>

<template>
    {{ loading }}

    <div v-loading="loading">
        <el-button type="primary" @click="addFetch">获取数据</el-button>

        我是内容 ：： {{ name }}

    </div>
</template>

<style scoped lang="scss"></style>